<template>
  <div id="consoleDataWe" class="consoleDataWe">
    <div class="statistics_border">
    <!-- 数据模块 -->
    <div class="statistics_center">
        <div class="statistics_top r_flex_space">
            <p></p>
            <p>时间筛选</p>
        </div>
        <div class="statistics_bottom r_flex_space">
            <div class="stati_list">
                <count-to :separator="','" :decimals="2" :start-val="0" :end-val="Number(statisticsDta.pay)" :duration="500"/>
                <p class="stati_p1" >平台总支出</p>
            </div>

            <div class="stati_list">
                <count-to :separator="','" :decimals="2" :start-val="0" :end-val="Number(statisticsDta.profits)" :duration="500"/>
                <p class="stati_p1">平台总盈利</p>
            </div>

            <div class="stati_list">
                <count-to :separator="','" :decimals="2" :start-val="0" :end-val="(Number(statisticsDta.profits) - Number(statisticsDta.pay))" :duration="500"/>
                <p class="stati_p1">平台总盈利</p>
            </div>
        </div>
    </div>

      <!-- 折线图 -->
      <div class="statistics_body r_flex box_border echart_center" >
        <div id="main" style="width: 100%;height:300px;"></div>
      </div>

      <!-- 中国地图 -->
      <div class="statistics_body r_flex_space" >
        <div class="ditu_left box_border" style="height:600px;" >
          <div id="chinaMap" style="width: 100%; height:100%;"></div>
        </div>
        <div class="ditu_rigth box_border" style="height:600px;" > 
          <p class="paihang_title" style="color: #333; text-align: center;" >渠道申请成功率</p>
          <div class="paihang_center">
            <div class="paihang_list" v-for="(data, index) in rankingData" :key="index" >
                <div class="paihang_name" >{{data.name}}</div>
                <div class="r_flex" >
                    <p class="paihang_p1" >10%</p>
                    <div class="paihang_width" style="width: 100%;" >
                        <i class="paihang_i" :style="'width:'+data.num+'%'" ></i>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { dataTotal, sevenApplys, sevenData } from '@/api/business/total'
import * as echarts from "echarts";
import "../../../../static/js/china.js";
import countTo from 'vue-count-to';

export default {
  name: 'consoleDataWe',
  components: {
    countTo,
  },
  data() {
    return {
      // 表达统计主体
      statisticsDta: {},
      // 查询参数
      dataTotalBo: {
        pageNum: 1,
        pageSize: 999
      },
      // 图表参数
      myChartData: {},
      // 排行榜数据
      rankingData: [
        { name: '安逸花', num: 80 },
        { name: '安逸花', num: 70 },
        { name: '安逸花', num: 60 },
        { name: '安逸花', num: 50 },
        { name: '安逸花', num: 40 },
        { name: '安逸花', num: 30 },
        { name: '安逸花', num: 20 },
        { name: '安逸花', num: 10 },
        { name: '安逸花', num: 4 },
      ]
    }
  },
  created() {
    this.getdataTotal()
  },
  mounted() {
  },
  methods: {
    // 随机0-1000的数
    randomData() {
      return Math.round(Math.random()*1000);
    },
    getdataTotal() {
      dataTotal(this.dataTotalBo).then(response => {
        this.statisticsDta = response
      })
      sevenData().then(response => {
        this.myChartData = response.data
        // 7日折线图
        this.xuanranMyChart()
        // 中国地图分布
        this.xuanranChinaMap()
      })
    },
    xuanranMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 图表X轴：日期
      var Xdata = this.myChartData.map(value=> value.date)

      // 图表Y轴：数量
      // applyNum	大额贷申请数	integer(int64)	
      var YapplyNum = this.myChartData.map(value=> value.applyNum)
      var clolr1 = '#409EFF'
      // applyPrice	大额贷申请收益	number(bigdecimal)	
      var YapplyPrice = this.myChartData.map(value=> value.applyPrice)
      var clolr2 = '#e6a23c'
      // jisuNum	极速贷点击数	integer(int64)	
      var YjisuNum = this.myChartData.map(value=> value.jisuNum)
      var clolr3 = '#f56c6c'
      // jisuPrice	极速贷点击收益	number(bigdecimal)	
      var YjisuPrice = this.myChartData.map(value=> value.jisuPrice)
      var clolr4 = '#673ab7'
      // pay	支出	number(bigdecimal)	
      var Ypay = this.myChartData.map(value=> value.pay)
      var clolr5 = '#da0000'
      // profits	收益
      var Yprofits = this.myChartData.map(value=> value.profits)
      var clolr6 = '#67C23A'

      // 图表属性
      var option = {
          backgroundColor: '#fff',
          title: {
              text: '7日折线图',
              left: '0%',
              top: '0%',
              textStyle: {
                  color: '#333',
                  fontSize: 14
              }
          },
          // 说明位置
          legend: {
              show: true,
              icon: 'circle',
              top: '13%',
              itemWidth: 6,
              itemHeight: 6,
              itemGap: 25,
          },
          // 图表位置
          grid: {
              left: '1%',
              right: '3%',
              bottom: '1%',
              containLabel: true
          },
          tooltip: {
              trigger: 'axis'
          },
          xAxis: [{
              type: 'category',
              data: Xdata,
              axisLine: {
                  lineStyle: {
                    color: '#ddd'
                  }
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  interval: 0,
                  textStyle: {
                      color: '#333'
                  },
                  margin: 15
              },
              boundaryGap: false
          }],
          yAxis: [{
              type: 'value',
              axisTick: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      color: '#ddd'
                  }
              },
              axisLabel: {
                  textStyle: {
                      color: '#333'
                  }
              },
              splitLine: {
                  show: false
              }
          }],
          // 大额贷申请数，极速贷点击数，平台总支出，平台总收益统计图表，
          series: [
            {
              name: '大额贷申请数',
              type: 'line',
              data: YapplyNum,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr1
              },
              itemStyle: {
                  normal: {
                      color: clolr1,
                      borderColor: clolr1
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr1
                          },
                          {
                              offset: 1, 
                              color: '#a0cfff'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr1
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr1
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr1,
                          borderWidth: 2
                  }
              }
            },
            {
              name: '大额贷申请收益',
              type: 'line',
              data: YapplyPrice,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr2
              },
              itemStyle: {
                  normal: {
                      color: clolr2,
                      borderColor: clolr2
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr2
                          },
                          {
                              offset: 1, 
                              color: '#fdf6ec'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr2
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr2
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr2,
                          borderWidth: 2
                  }
              }
            },
            {
              name: '极速贷点击数',
              type: 'line',
              data: YjisuNum,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr3
              },
              itemStyle: {
                  normal: {
                      color: clolr3,
                      borderColor: clolr3
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr3
                          },
                          {
                              offset: 1, 
                              color: '#fef0f0'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr3
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr3
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr3,
                          borderWidth: 2
                  }
              }
            },
            {
              name: '极速贷点击收益',
              type: 'line',
              data: YjisuPrice,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr4
              },
              itemStyle: {
                  normal: {
                      color: clolr4,
                      borderColor: clolr4
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr4
                          },
                          {
                              offset: 1, 
                              color: '#fff'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr4
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr4
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr4,
                          borderWidth: 2
                  }
              }
            },
            {
              name: '平台总支出',
              type: 'line',
              data: Ypay,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr5
              },
              itemStyle: {
                  normal: {
                      color: clolr5,
                      borderColor: clolr5
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr5
                          },
                          {
                              offset: 1, 
                              color: '#fff'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr5
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr5
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr5,
                          borderWidth: 2
                  }
              }
            },
            {
              name: '平台总收益',
              type: 'line',
              data: Yprofits,
              symbolSize: 6,
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                  color: clolr6
              },
              itemStyle: {
                  normal: {
                      color: clolr6,
                      borderColor: clolr6
                  }
              },
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: clolr6
                          },
                          {
                              offset: 1, 
                              color: '#fff'
                          }
                      ])
              },
              emphasis: {
                  itemStyle: {
                      color: {
                              type: 'radial',
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [{
                                      offset: 0,
                                      color: clolr6
                                  },
                                  {
                                      offset: 0.4,
                                      color: clolr6
                                  },
                                  {
                                      offset: 0.5,
                                      color: '#fff'
                                  }, {
                                      offset: 0.7,
                                      color: '#fff'
                                  }, {
                                      offset: 0.8,
                                      color: '#fff'
                                  }, {
                                      offset: 1,
                                      color: '#fff'
                                  }
                              ]
                          },
                          borderColor: clolr6,
                          borderWidth: 2
                  }
              }
            },
          ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    xuanranChinaMap() {
      // 基于准备好的dom，初始化echarts实例
      var ChinaMap = echarts.init(document.getElementById('chinaMap'));
      // legend内容
      var legendData=['空调','太阳能','洗衣机','冰箱'];
      // legend自定义颜色 不设置有默认色
      var legendColor=['blue','gray','#000','cyan'];
      // 映射颜色  不设置有默认色
      var visColor=["#ffffff","#e8192f","#d6664d","#B9044E","#f0ba2e","#d3ce2b","#169A7f","#0b6573","#1BB3c8"];
      // 图表属性
      var chinaOption = {
          title: {
              text: '大额贷申请城市分布统计',
              subtext: '',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data:['大额度申请数','UV','PV']
          },
          geo: {
              show: true,
              map: 'china',
              label: {
                  normal: {
                      show: false
                  },
                  emphasis: {
                      show: false,
                  }
              },
              roam: false,
              itemStyle: {
                  normal: {
                      areaColor: '#023677',
                      borderColor: '#1180c7',
                  },
                  emphasis: {
                      areaColor: '#4499d0',
                  }
              }
          },
          visualMap: {
              min: 0,
              max: 2500,
              left: 'left',
              top: 'bottom',
              text: ['高','低'],           // 文本，默认为数值文本
              calculable: false
          },
          // toolbox: {
          //     show: true,
          //     orient: 'vertical',
          //     left: 'right',
          //     top: 'center',
          //     feature: {
          //         dataView: {readOnly: false},
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          series: [
              {
                  name: '大额度申请数',
                  type: 'map',
                  mapType: 'china',
                  roam: false,
                  label: {
                      normal: {
                          show: true
                      },
                      emphasis: {
                          show: true
                      }
                  },
                  data:[
                      {name: '北京',value: this.randomData() },
                      {name: '天津',value: this.randomData() },
                      {name: '上海',value: this.randomData() },
                      {name: '重庆',value: this.randomData() },
                      {name: '河北',value: this.randomData() },
                      {name: '河南',value: this.randomData() },
                      {name: '云南',value: this.randomData() },
                      {name: '辽宁',value: this.randomData() },
                      {name: '黑龙江',value: this.randomData() },
                      {name: '湖南',value: this.randomData() },
                      {name: '安徽',value: this.randomData() },
                      {name: '山东',value: this.randomData() },
                      {name: '新疆',value: this.randomData() },
                      {name: '江苏',value: this.randomData() },
                      {name: '浙江',value: this.randomData() },
                      {name: '江西',value: this.randomData() },
                      {name: '湖北',value: this.randomData() },
                      {name: '广西',value: this.randomData() },
                      {name: '甘肃',value: this.randomData() },
                      {name: '山西',value: this.randomData() },
                      {name: '内蒙古',value: this.randomData() },
                      {name: '陕西',value: this.randomData() },
                      {name: '吉林',value: this.randomData() },
                      {name: '福建',value: this.randomData() },
                      {name: '贵州',value: this.randomData() },
                      {name: '广东',value: this.randomData() },
                      {name: '青海',value: this.randomData() },
                      {name: '西藏',value: this.randomData() },
                      {name: '四川',value: this.randomData() },
                      {name: '宁夏',value: this.randomData() },
                      {name: '海南',value: this.randomData() },
                      {name: '台湾',value: this.randomData() },
                      {name: '香港',value: this.randomData() },
                      {name: '澳门',value: this.randomData() }
                  ]
              },
              {
                  name: 'UV',
                  type: 'map',
                  mapType: 'china',
                  label: {
                      normal: {
                          show: true
                      },
                      emphasis: {
                          show: true
                      }
                  },
                  data:[
                      {name: '北京',value: this.randomData() },
                      {name: '天津',value: this.randomData() },
                      {name: '上海',value: this.randomData() },
                      {name: '重庆',value: this.randomData() },
                      {name: '河北',value: this.randomData() },
                      {name: '安徽',value: this.randomData() },
                      {name: '新疆',value: this.randomData() },
                      {name: '浙江',value: this.randomData() },
                      {name: '江西',value: this.randomData() },
                      {name: '山西',value: this.randomData() },
                      {name: '内蒙古',value: this.randomData() },
                      {name: '吉林',value: this.randomData() },
                      {name: '福建',value: this.randomData() },
                      {name: '广东',value: this.randomData() },
                      {name: '西藏',value: this.randomData() },
                      {name: '四川',value: this.randomData() },
                      {name: '宁夏',value: this.randomData() },
                      {name: '香港',value: this.randomData() },
                      {name: '澳门',value: this.randomData() }
                  ]
              },
              {
                  name: 'PV',
                  type: 'map',
                  mapType: 'china',
                  label: {
                      normal: {
                          show: true
                      },
                      emphasis: {
                          show: true
                      }
                  },
                  data:[
                      {name: '北京',value: this.randomData() },
                      {name: '天津',value: this.randomData() },
                      {name: '上海',value: this.randomData() },
                      {name: '广东',value: this.randomData() },
                      {name: '台湾',value: this.randomData() },
                      {name: '香港',value: this.randomData() },
                      {name: '澳门',value: this.randomData() }
                  ]
              }
          ]
      };
      
      // 绘制图表
      ChinaMap.setOption(chinaOption);
    }
  }
}
</script>

<style scoped lang="scss">
.dwd{
  text-align: center;
}
</style>
